<!--
 * @Author: new-wang
 * @Date: 2025-04-10 11:12:03
 * @LastEditors: new-wang
 * @LastEditTime: 2025-08-20 15:01:39
 * @FilePath: \v3bbs\src\components\home\head\HomeHeader.vue
 * @Description:
-->
<template>
  <a-layout-header>
    <div class="header1">
      <div class="main-header">
        <div class="header-logonav">
          <!-- logo -->
          <div class="header-item-logo" v-if="!collapsed">
            <slot name="avatar">
              <img src="@/assets/img/logo-wx.png" alt="默认图片" style="height: 100%" />
            </slot>
          </div>
          <!-- nav-menu -->
          <HomeHeadMenu v-if="!collapsed" />
          <HomeHeadSider v-else />
        </div>
        <div class="header-right-content">
          <!-- 搜索框 -->
          <div class="header-search">
            <a-space>
              <a-input-search v-model:value="searchContentTemp" style="min-width: 100px; width: 100%" @search="onSearch"
                placeholder="搜索新新论坛" />
            </a-space>
          </div>
          <!-- 创作中心 -->
          <div v-if="!collapsed" class="header-creation-center header-item">
            <a-dropdown overlayClassName="header-creation" :trigger="['hover']" placement="bottomRight">
              <div class="options">创作中心</div>
              <template #overlay>
                <a-menu>
                  <a-menu-item key="0">
                    <template #icon>
                      <EditFilled />
                    </template>
                    写文章
                    <!-- <a href="http://www.alipay.com/">1st menu item</a> -->
                  </a-menu-item>
                  <a-menu-item key="1">
                    <template #icon>
                      <HighlightFilled />
                    </template>
                    发话题
                  </a-menu-item>
                  <!-- <a-menu-divider />
                <a-menu-item key="3">3rd menu item</a-menu-item> -->
                </a-menu>
              </template>
            </a-dropdown>
          </div>
          <!-- 管理端 -->
          <!-- <div class="header-item header-management" v-if="isLogin">
            <div class="options">
              <span>管理端</span>
            </div>
          </div> -->
          <!-- 主题色 -->
          <div class="header-item header-theme">
            <a-dropdown overlayClassName="header-theme-color-config" :placement="'bottomRight'" :trigger="['click']">
              <template #overlay>
                <div class="ant-dropdown-menu">
                  <p>主题颜色 {{ themeColor }}</p>
                  <div class="color-options">
                    <div @click="changeColor(color)" class="color-options-item"
                      :class="{ active: themeColor === color }" v-for="color of colorOptions" :key="color"
                      :style="'background: ' + color">
                      <CheckOutlined v-if="themeColor === color" style="color: #fff" />
                    </div>
                  </div>
                </div>
              </template>
              <div class="options theme-color">
                <SkinFilled :style="{ color: themeColor }" />
              </div>
            </a-dropdown>
          </div>
          <!-- 国际化 -->
          <div v-if="!collapsed" class="header-item header-languages">
            <div class="options">
              <span>国际化</span>
            </div>
          </div>
          <!-- 登录 -->
          <div class="header-item header-item-login" v-if="!isLogin">
            <div class="options" @click="showLoginModal">
              <a-button style="
                  border: 1px solid rgba(30, 128, 255, 0.3);
                  background: rgba(30, 128, 255, 0.05);
                  color: #007fff;
                ">
                登录
              </a-button>
            </div>
            <!-- 登录Modal -->
            <Login />
            <!-- 注册Modal -->
            <Register />
          </div>
        </div>
      </div>
    </div>
  </a-layout-header>
</template>

<script setup lang="ts">
import HomeHeadMenu from '@/components/home/head/HomeHeadMenu.vue'
import HomeHeadSider from '@/components/home/head/HomeHeadSider.vue'
import Login from '@/components/login/LoginIndex.vue'
import Register from '@/components/login/RegisterIndex.vue'
import { EditFilled, HighlightFilled, SkinFilled, CheckOutlined } from '@ant-design/icons-vue'
import { useConfigStore } from '@/stores/config'
import { storeToRefs } from 'pinia'
import { ref } from 'vue'

const { collapsed, isLogin, loginVisible, colorOptions, themeColor } = storeToRefs(useConfigStore())
const { setThemeColor } = useConfigStore()

function showLoginModal() {
  loginVisible.value = true
}

/**
 * 搜索框部分
 */
const searchContentTemp = ref('')
function onSearch() {
  console.log('searchContentTemp', searchContentTemp.value)
}
/** search--end  */

/**
 * 主题色选择
 */
const changeColor = (color: string) => {
  // 更新主题色
  setThemeColor(color)
}
</script>

<style scoped lang="less">
.ant-layout-header {
  padding: 0 10px;
  height: 60px;
  line-height: 60px;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
}

// 主题色选择
.header-theme-color-config {
  .ant-dropdown-menu {
    margin-top: -2px;
    padding: 12px;

    .color-options {
      display: flex;
      justify-content: space-around;
      flex-wrap: wrap;
      gap: 8px;

      .color-options-item {
        width: 24px;
        height: 24px;
        margin: 0;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 6px;
        transition: all 0.3s ease-in-out;
        border: 2px solid transparent;

        &:hover {
          transform: scale(1.1);
          box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
        }

        &.active {
          border-color: #fff;
          box-shadow: 0 0 0 2px var(--theme-color);
        }

        :deep(.anticon) {
          font-size: 14px;
          transition: all 0.3s ease-in-out;
        }
      }
    }
  }
}

// 主题色图标
.theme-color {
  transition: all 0.3s ease-in-out;

  &:hover {
    transform: rotate(30deg);
  }
}

.header1 .main-header,
.header1 {
  display: flex;
  align-items: center;
  background: var(--content-background);
  width: 100%;
}

.header1 {
  justify-content: center;
  border-bottom: 1px solid var(--border-color);
  padding: 0 10px;

  .main-header {
    max-width: 1100px;
    padding: 0;
    justify-content: space-between;

    .header-logonav {
      display: flex;
      justify-content: space-between;
      align-items: center;

      .header-item-logo {
        cursor: pointer;
        height: 40px;
        // flex-shrink: 0;
      }
    }

    .header-right-content {
      display: flex;
      align-items: center;
      justify-content: flex-end;

      .header-search,
      .header-item {
        cursor: pointer;
        padding: 0 12px;
        color: #71777c;

        .options:hover {
          opacity: 0.7;
        }
      }
    }
  }
}

// 移动端
@media screen and (max-width: 900px) {
  .header-message-box {
    left: 0 !important;
    position: relative;
    display: flex;
    justify-content: center;
  }

  .header-right-content {

    .header-search,
    .header-item,
    .header-item-login {
      padding: 0 8px;
    }
  }
}
</style>
